/**
 * 表单组件
 */
import { watch, h, ref} from 'vue'
export default {
    props: {
        /* 双向绑定使用value valueChange */
        value: {
                 
        },
        label: {
            type: String,
            default: ''
        },
        /* 表单类型 */
        type: {
            type: String,
            default: 'input'
        },
        labelWidth: {
            type: String,
            default: '80px'
        },
        placeholder: {
            type: String,
            default: '请输入'
        },
        /* 选项 */
        option: {
            type: Array,
            default: []
        },
        /* 清除 */
        clearable: {
            type: Boolean,
            default: false
        },
        /* type = input 时生效,包含所有原生属性 */
        otherType: {
            type: String,
            default: ''
        },
        /* 只有otherType为password时生效 */
        showPassword: {
            type: Boolean,
            default: false
        },
        /* 是否禁用 */
        disabled: {
            type: Boolean,
            default: false
        },
        /* type=select时生效 */
        multiple: {
            type: Boolean,
            default: false
        },
        /* 最大选择条数,为0时没有限制 */
        multipleLimit: {
            type: Number,
            default: 0
        },
        /* 拖拽组件特有属性 */
        valueKey:{
            type: [String , Number],
            default: ''
        }
    },
    
    setup(props, { emit, attrs }) {
        let newValue = ref()
        watch(
            () => newValue,
            n => {
                emit('valueChange', n.value,props.valueKey)
            }, { deep: true }
        )
        return () => {
            if (props.type == 'input') {
                return h(<el-form-item/>, { label: props.label ,labelWidth:props.labelWidth}, {
                    // 使用默认插槽,解决vue警告
                    default: () => {
                        return h(
                            <el-input />, {
                            'model-value': props.value,
                            type: props.otherType,
                            placeholder: props.placeholder,
                            clearable: props.clearable,
                            showPassword: props.showPassword,
                            disabled: props.disabled,
                            onInput: (value) => {
                                // 外部值转化为内部值
                                newValue.value = value
                            },
                        }
                        )
                    }
                }
                )
            } else if (props.type === 'select') {
                return h(<el-form-item />, {
                    label: props.label,
                    labelWidth: props.labelWidth
                },
                    {
                        default: () => {
                            return h(
                                <el-select />, {
                                'model-value': props.value,
                                placeholder: props.placeholder,
                                multiple: props.multiple,
                                disabled: props.disabled,
                                clearable: props.clearable,
                                multipleLimit: props.multipleLimit,
                                onChange: (value) => {
                                    // 外部值转化为内部值
                                    newValue.value = value
                                },
                            },
                                {
                                    default: () => {
                                        return props.option.map(o => {
                                            return h(<el-option></el-option>, {
                                                label: o.label,
                                                value: o.value,
                                                disabled: o.disabled
                                            })
                                        })
                                    }
                                }
                            )
                        }
                    })
            } else if (props.type === 'radio') {
                return h(<el-form-item />, {
                    label: props.label,
                    labelWidth: props.labelWidth
                }, {
                    default: () => {
                        return h(<el-radio-group />, {
                            'model-value': props.value,
                            onChange: (value) => {
                                // 外部值转化为内部值
                                newValue.value = value
                            },
                        }, {
                            default: () => {
                                return props.option.map(o => {
                                    if(o.type === 'button'){
                                        return h(<el-radio-button />, {
                                            label: o.value,
                                            disabled: o.disabled,
                                            border: o.border
                                        },{default:()=>{return o.label}})
                                    }else{
                                        return h(<el-radio />, {
                                            label: o.value,
                                            disabled: o.disabled,
                                            border: o.border,
                                        },{default:()=>{return o.label}})
                                    }
                                })
                            }
                        })
                    }
                })
            } else if (props.type === 'switch') {
                return h(<el-form-item />, {
                    label: props.label,
                    labelWidth: props.labelWidth
                },
                    {
                        default: () => {
                            return h(
                                <el-switch />, {
                                'model-value': props.value,
                                placeholder: props.placeholder,
                                multiple: props.multiple,
                                disabled: props.disabled,
                                clearable: props.clearable,
                                multipleLimit: props.multipleLimit,
                                onChange: (value) => {
                                    if(value == newValue.value){
                                        newValue.value = !newValue.value
                                    }
                                    // 外部值转化为内部值
                                    newValue.value = value
                                },
                            },
                            )
                        }
                    })
            }
        }
    }
}